{literal}

<script>

$(document).ready(function() {

    $('#libre').change(function() {
        if($(this).is(":checked")) {
        	$("#cantidadCreditosSelect").prop('disabled', true);
        }else{
        	$("#cantidadCreditosSelect").prop('disabled', false);
        	}
    });

    $('#fechaInp').datepicker({
		  format: "dd/mm/yyyy",
		    language: "es",
		    autoclose: true,
		    todayHighlight: true
	});

    $("#cargaConfirmaBtn").click(
			function() {
				if($("#nuevaCargaLn").attr('class')=='active'){
				var usrId = $("#idUsrCarga").val();
                var creditos = $('#promoSelect option:selected').attr("creditos");
                var libre = $('#promoSelect option:selected').attr("libre");
                var promoId = $('#promoSelect').val();
				var precio = $("#precio").val();
				
				// Returns successful data submission message when the entered information is stored in database.
				var dataString = 'idUsrCarga=' + usrId + '&creditos='
						+ creditos 	+ '&precio=' + precio + '&libre=' + libre + '&promoId=' + promoId;
				
				$.ajax({
					type : "POST",
					url : "usuarios.php?operacion=cargaCredito",
					data : dataString,
					cache : false,
					success : function(result) {
						var usrJson = jQuery.parseJSON( result );
						$('#carga').modal('toggle');
						$("#tablaa").bootstrapTable('updateRow', {
				            index: indice,
				            row: usrJson
				        });
					}
				});
				}
				if($("#cargaManualLn").attr('class')=='active'){
//						$('#frForm')
//						.data('bootstrapValidator').validate();
//						if(!$('#frForm')
//								.data('bootstrapValidator').isValid()){
//							return;
//						}
					
					var usrId = $("#idUsrCarga").val();
					var fecha = $("#fechaInp").val();
					var cantidad = $("#cantidadCreditosSelect").val();
					var libre = $("#libre").prop( "checked" );
					// Returns successful data submission message when the entered information is stored in database.
					var dataString = 'idUsr=' + usrId + '&fecha='
							+ fecha + '&cantidad=' + cantidad + '&libre=' + libre;
//								+ '&accion=' + accion;
					$.ajax({
						type : "POST",
						url : "usuarios.php?operacion=cargaManual",
						data : dataString,
						cache : false,
						success : function(result) {
							var usrJson = jQuery.parseJSON( result );
							$('#carga').modal('toggle');
							$("#tablaa").bootstrapTable('updateRow', {
					            index: indice,
					            row: usrJson
					        });
						$('#carga').modal('toggle');									
						
						}
					});
					
					
				}
				
				
				return false;
			});

    $("#buscarBtn").click(
			function() {
				var dataString =  'criterioSearch=' + $("#criterioSearch").val();    	    
				$.ajax({
					type : "GET",
					url : "usuarios.php?operacion=buscarxfiltro",
					data : dataString,
					cache : false,
					success : function(result) {
						var dataJson = jQuery.parseJSON( result );
						$('#tablaa').bootstrapTable({
			                   data:dataJson 
			                });
//							console.log(JSON.stringify(dataJson[0]));
							$('#tablaa').bootstrapTable('load',dataJson);
					}
				});
				});

    $('#busquedaForm').bind('keydown', function(e) {
        if (e.keyCode == 13) {
        	$('#buscarBtn').click();
        	e.preventDefault();                        
        }
    });
    
});



function editar(id){
	var options = {
		    "remote":"registro.php?op=edicion&id="+id
			
		}
	$('#edicion').modal(options);
	
}
function refreshCargaModal(){
	  var creditos = $('#promoSelect option:selected').attr("creditos");
	  var precio = $('#promoSelect option:selected').attr("precio");
      $('#precio').val(precio);
}
function verHistorico(id){
	var dataString = 'idUsr=' + id;
	$.ajax({
		type : "POST",
		url : "usuarios.php?operacion=getHistory",
		data : dataString,
		cache : false,
		success : function(result) {
			var historicosJson = jQuery.parseJSON( result );
			$('#historicoTable').bootstrapTable({
                data:historicosJson 
             });
//				console.log(JSON.stringify(dataJson[0]));
				$('#historicoTable').bootstrapTable('load',historicosJson);
		
		}
		});
	$.ajax({
		type : "POST",
		url : "grilla.php?operacion=getReservas",
		cache : false,
		data : dataString,
		success : function(result) {
			reservasJson = jQuery.parseJSON(result);

			$('#reservasTable').bootstrapTable({
                data:reservasJson 
             });
// 				console.log(JSON.stringify(reservasJson));
				$('#reservasTable').bootstrapTable('load',reservasJson);
		}
	});
	$('#historicoModal').modal();
	
}

function cargarCredito(id){
	
		var dataString = 'idUsr=' + id;
		$.ajax({
		type : "POST",
		url : "usuarios.php?operacion=getById",
		data : dataString,
		cache : false,
		success : function(result) {
			var usrJson = jQuery.parseJSON( result );
			$('#modalLabel').html('Cargar credito: <strong>' + usrJson.apellido + ', ' + usrJson.nombre + '<strong>');
			$('#creditosDisponibles').html('<strong>' + usrJson.creditos  + '<strong>');
			$('#creditosDisponibles').val(usrJson.creditos);
			$('#idUsrCarga').val(usrJson.id);
		}
		});

		$.ajax({
		type : "POST",
		url : "promocion.php?operacion=getPromos",
		cache : false,
		success : function(result) {
			var promosJson = jQuery.parseJSON( result );
			var options="";
			$.each(promosJson, function(idx, obj) {
				options+= "<option value='" + obj.id +"' creditos='" + obj.creditos +"' precio='" +obj.precio + "' libre='" + obj.libre +"' >" +obj.descripcion + " - " + (obj.libre == 'S' ? 'Libre' : obj.creditos  + " creditos") +" - $" + obj.precio  +"</option>"
			});
			$('#promoSelect').html(options);
			refreshCargaModal();
		}
		});
			
			$('#carga').modal();
	
}

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});


function fechaClaseFormatter(value, row) {
	return row.fechaClaseObject.nombre
		+ " " + row.fechaClaseObject.nro
		+ " de " + row.fechaClaseObject.mes
		+ " " + row.fechaClase.substring(10,16)+ " hs";
}
function fechaInscripcionFormatter(value, row) {
	return row.fechaInscripcionObject.nombre
		+ " " + row.fechaInscripcionObject.nro
		+ " de " + row.fechaInscripcionObject.mes
		+ " " + row.fechaInscripcion.substring(10,16)+ " hs";
}
function creditoResFormatter(value,row) {
	if(value=='-1')
	{
    	return 'Libre';
	}else{
		return value;
	}
}
function creditoFormatter(value,row) {
	if(row.libre=='S')
	{
    	return 'Libre';
	}else{
		return value;
	}
}

function operateFormatter(value, row, index) {
    return [
		'<a class="cargarCredito" style="color: green;" href="javascript:void(0)" title="Cargar Cr&eacute;dito">',
		'<i class="glyphicon glyphicon-plus"></i>',
		'</a> ',
		'<a class="verHistorico" style="color: gray;" href="javascript:void(0)" title="Ver Historicos">',
		'<i class="glyphicon glyphicon-list-alt"></i>',
		'</a>  ',		
        '<a class="edit" href="javascript:void(0)" title="Editar usuario">',
        '<i class="glyphicon glyphicon-edit"></i>',
        '</a> '
        
    ].join('');
}
window.operateEvents = {
    'click .edit': function (e, value, row, index) {
    	indice = index;
        editar(row.id);
    },
    'click .cargarCredito': function (e, value, row, index) {
    	indice = index;
    	cargarCredito(row.id);
    },
    'click .verHistorico': function (e, value, row, index) {
    	verHistorico(row.id);
    }
};
function detailFormatter(index, row) {
    var html = [];
    console.log(row);
    html.push('<p><b>ID:</b> ' + row.id + '</p>');
    html.push('<p><b>Nombre:</b> ' + row.nombre + ' ' + row.apellido + '</p>');
    html.push('<p><b>Correo electr&oacute;nico:</b> ' + row.email + '</p>');
    html.push('<p><b>Telefono:</b> ' + row.telefono + '</p>');
    html.push('<p><b>DNI:</b> ' + row.dni + '</p>');
    html.push('<b>Fecha de alta:</b> ' + row.alta + '</p>');
    html.push('<p><b>Certificado:</b> ' + siNoFormatter(row.certificado));
	if(row.certificado=='S'){
	    html.push('<b> - Vencimiento:</b> ' + row.vencimientoCertificadoStr);
	}
    html.push('</p>');
    
	var credito = ""; 
	if(row.libre=='S'){
		credito = 'Libre';
	}else{
		credito = row.creditos;
		}
    html.push('<p><b>Creditos:</b> ' + credito);
    html.push('<b> - Vencimiento:</b> ' + row.vencimientoCreditosStr + '</p>');
    
    return html.join('');
}

</script>

{/literal}



	<form role="form"
		id="busquedaForm" method="post" class="form-inline">
		<legend>B&uacute;squeda de usuarios</legend>
		<div class="form-group" style="width: 40%;">
			<div class="col-md-12">
				<input type="text" class="form-control input-lg " id="criterioSearch" 
				name="criterioSearch"  placeholder="Ingresa nombre, apellido o DNI" style="width: 100%;" >
			</div>
		</div>

		<div class="form-group">
			<div class="col-md-2">
				<button type="button" class="btn btn-success btn btn-lg"
					style="padding-right: 50px; padding-left: 50px;" id="buscarBtn">Buscar</button>
			</div>
		</div>
	</form>

<table data-toggle="table"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-height="500"
       class="table table-striped"
       data-detail-view="true"
       data-detail-formatter="detailFormatter"
       id="tablaa">
    <thead>
    <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="nombre" data-sortable="true">Nombre</th>
        <th data-field="apellido" data-sortable="true">Apellido</th>
        <th data-field="email" data-visible="false">Mail</th>
        <th data-field="telefono" data-visible="false">Telefono</th>
        <th data-field="dni" >DNI</th>
        <th data-field="certificado" data-formatter="siNoFormatter" data-visible="false">Certificado</th>
        <th data-field="vencimientoCertificadoStr" data-visible="false">Vencimiento Certificado</th>
        <th data-field="creditos" data-formatter="creditoFormatter" data-sortable="true">Cr&eacute;ditos</th>
        <th data-field="vencimientoCreditosStr" data-sortable="true">Vencmiento cr&eacute;ditos</th>
        <th data-formatter="operateFormatter" data-events="operateEvents"></th>
    </tr>
    </thead>
</table>


<!-- Modal  historico-->
<div class="modal fade" id="historicoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" >
    <div class="modal-content" style="width: 150%;" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Hist&oacute;ricos</h4>
      </div>
      <div class="modal-body">
       	<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active" id="historicoLn"><a href="#historicoTab" data-toggle="tab">Hist&oacute;rico Carga</a></li>
        <li id="reservasLn"><a href="#reservasTab" data-toggle="tab">Reservas Turnos</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
    	
        <div class="tab-pane active" id="historicoTab" >
			<div style="overflow: auto; height: 250px">
				
	<table data-toggle="table"
       data-height="250"
       class="table table-striped"
       id="historicoTable">
    <thead>
    <tr>
        <th data-field="creditos" data-formatter="creditoFormatter">Cr&eacute;ditos</th>
        <th data-field="precio" >Precio</th>
        <th data-field="fechaCarga" >Fecha de carga</th>
        <th data-field="vencimientoCreditos">Vencimiento</th>
    </tr>
    </thead>
</table>
					
			</div>
            
        </div>
            <div class="tab-pane" id="reservasTab">
											<table data-toggle="table"
       data-height="250"
       class="table table-striped"
       id="reservasTable">
    <thead>
    <tr>
        <th data-field="fechaClaseObject" data-formatter="fechaClaseFormatter">Fecha Clase</th>
        <th data-field="fechaInscripcionObject" data-formatter="fechaInscripcionFormatter">Fecha inscripci&oacute;n</th>
        <th data-field="creditosRestantes" data-formatter="creditoResFormatter" data-align="center" >Cr&eacute;ditos Restantes</th>
    </tr>
    </thead>
</table>
											
	</div>
            
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal edicion-->
<div class="modal fade" id="edicion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="carga" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalLabel"></h4>
      </div>
      <div class="modal-body" id = "modalBody">
      	
      	
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active" id="nuevaCargaLn"><a href="#nuevaCargaTab" data-toggle="tab">Nueva carga</a></li>
        <li id="cargaManualLn"><a href="#cargaManualTab" data-toggle="tab">Carga Manual</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="nuevaCargaTab">
        	<br>
        	<form role="form" id="cargaCreditoForm"
					method="post">

					<input type="hidden" id="idUsrCarga" name="idUsrCarga">
					

					<div class="form-group">
						<label for="promoSelect">Paquete</label> <select class="form-control" id="promoSelect"
							name="promoSelect"><option value="0">Elige un paquete</option></select>
					</div>
					
					<div class="form-group">
						<label for="precio">Precio</label> <input type="text"
							class="form-control" id="precio" name="precio"
							placeholder="Precio total">
					</div>

				</form>    
            
        </div>
        <div class="tab-pane" id="cargaManualTab">
			<div style="overflow: auto; height: 220px">
								<form role="form"  id="frForm" method="post">


					<div class="form-group" style="margin-top:20px">
						<label for="cantidadCreditosSelect">Creditos</label> <select
							class="form-control" id="cantidadCreditosSelect" name="cantidadCreditosSelect">
							<option	value="1">1</option>
							<option	value="2">2</option>
							<option	value="3">3</option>
							<option	value="4">4</option>
							<option	value="5">5</option>
							<option	value="6">6</option>
							<option	value="7">7</option>
							<option	value="8">8</option>
							<option	value="9">9</option>
							<option	value="10">10</option>
							<option	value="11">11</option>
							<option	value="12">12</option>
							<option	value="13">13</option>
							<option	value="14">14</option>
							<option	value="15">15</option>
							<option	value="16">16</option>
							<option	value="17">17</option>
							<option	value="18">18</option>
							<option	value="19">19</option>
							<option	value="20">20</option>
							<option	value="21">21</option>
							<option	value="22">22</option>
							<option	value="23">23</option>
							<option	value="24">24</option>
							<option	value="25">25</option>
							<option	value="26">26</option>
							<option	value="27">27</option>
							<option	value="28">28</option>
							<option	value="29">29</option>
							<option	value="30">30</option>
							<option	value="31">31</option>
								</select>
					</div>
					
					<div class="form-group"
						style="padding-bottom: 20px; padding-top: 20px;">
						<label for="libre" class="col-lg-1 control-label"
							style="padding-left: 3px;">Libre</label>
						<div class="col-lg-3">
							<input type="checkbox" id="libre" name="libre">
						</div>
						
					</div>
					
					
					<div class="form-group">
						<label for="fechaInp">Fecha de Vencimiento</label> 
					<input type="text" type="text" class="form-control" id="fechaInp" placeholder="Seleccione una fecha">
												
					</div>			
					

				</form>
			</div>
            
            
        </div>
    </div>
      	
      	
      	
			
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" id="cargaConfirmaBtn" class="btn btn-primary">Confirmar</button>
      </div>
    </div>
  </div>
</div>